import React from 'react'
import {NavBar,Icon} from 'antd-mobile'
import {connect} from 'react-redux'
import css from './index.module.scss'
import {request,baseURL} from '../../utils/request'
import HouseItem from "../../components/HouseItem";
const BMap=window.BMap
//封装后map需要全局
let map;

class MapFound extends React.Component {
    state = {
        showHouseList:false,
        //房源列表
        houseList:[],
    };
    //每一层地图级别
    mapLevel=[
{level:1,zoom:10,className:'map_circle'},
{level:2,zoom:14,className:'map_circle'},
{level:3,zoom:17,className:'map_rect'},
    ];
    //当前级别的索引
    mapIndex=0;

   zIndex=0;

    //移动地图
    moveMap=(e)=>{
        const{clientX,clientY}=e.changedTouches[0];
        const x=window.screen.width/2-clientX
        const y=window.screen.height/2-clientY
        //移动地图的API方法
        map.panBy(x,y)
    }

    // 根据 id 查询房屋列表的
  getHouseList = async (id) => {
    // 根据 id 查询房屋列表信息 - 新的API
    const houseList = (await request.get('/houses?cityId=' + id)).data.body.list;
    this.setState({ houseList });
  };

    //封装开始
    renderHouses=async (id,center)=>{      
           //根据城市id获取该城市下面的区
           const houses=(await request.get('/area/map?id='+id)).data.body
           // console.log(houses);
           const mapInfo=this.mapLevel[this.mapIndex]
            //传入点point,必须要传入一个参数级别
           map.centerAndZoom(center,mapInfo.zoom);
//清除覆盖物不写在事件内部而写在这里就不用加定时器,
        //    map.clearOverlays()
           houses.forEach(item=>{
    //把房源信息渲染到地图上
    const point=new BMap.Point(item.coord.longitude,item.coord.latitude);    // 指定文本标注所在的地理位置
    const opts = {
       position : point,    // 指定文本标注所在的地理位置
       offset   : new BMap.Size(-30, 0)    //设置文本偏移量
     }
     const label = new BMap.Label(`<div class="${mapInfo.className}"><span>${item.label}</span><span>${item.count}套</span></div>`, opts);  // 创建文本标注对象
     // label 标签有一些默认样式，需要去掉红色边框，把白色底色变成透明
     label.setStyle({
       border: 'none',
       backgroundColor: 'rgba(0,0,0,0)'
     });
     // 把文本绘制到地图中
     map.addOverlay(label);
   
     //添加点击事件
     label.addEventListener("click", (e)=>{
         label.setZIndex(++this.zIndex)
       // alert("您点击了标注");
       //传入新的id用封装的代码渲染各个区下面的房源
       const newId=item.value
       //当前点击的元素坐标传过去
       const center=point;   // 指定文本标注所在的地理位置
       if(mapInfo.level===3){
            // console.log('展示房屋列表');
            this.setState({showHouseList:true})
            //调用移动地图封装的方法
            this.moveMap(e)
             // 调用请求房源列表
          this.getHouseList(newId);
       }else{
    //每次点击的时候,索引要加一,因为级别进入了下一层
    this.mapIndex++;
    //清除上一层的覆盖物,只渲染本层的覆盖物,需要加一个定时器,要不然会报错
    setTimeout(()=>{
    map.clearOverlays()
    },10)  
    this.renderHouses(newId,center)
       }
    
   }); 
           })
    }
    //封装结束

    async componentDidMount(){
        const cityName=this.props.cityName
        //测试可以先写死一个值
        // const cityName='广州'
        map = new BMap.Map("map_container");          // 创建地图实例  
        const point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
        map.centerAndZoom(cityName);                 // 初始化地图，设置中心点坐标和地图级别  
        map.addControl(new BMap.NavigationControl());
        setTimeout(()=>{
            map.addControl(new BMap.ScaleControl());
        },1000)

         // 当地图开始拖拽的时候隐藏列表
    map.addEventListener('dragstart', () => {
        this.setState({ showHouseList: false });
      });

        //获取城市id值
        const id=(await request.get('/area/info?name=' + cityName)).data.body.value
        // console.log(id);
       this.renderHouses(id,cityName) 
        
       
    }
    render() { 
        const { showHouseList,houseList } = this.state;
        return (
            <div>
    <NavBar
      mode="light"
      icon={<Icon type="left" />}
      onLeftClick={() => this.props.history.go(-1)}
    >地图找房</NavBar>
    <div className={css.map}>
        <div className={css.map_container} id='map_container'></div>
    </div>
    {/* 房屋列表 */}
    {
        // showHouseList && 
        <div className={
            [
                css.house_list,
                // 通过添加或移除类名方式实现动画效果
                showHouseList ? css.show : ''
              ].join(' ')
        }>
            <div className={css.house_list_head}>
              <h3 className={css.house_list_head_title}>房屋列表</h3>
              <div className={css.house_list_head_more}>更多房源</div>
            </div>
            <div className={css.house_list_body}>
             {/* 每一项房源 */}
             {
                houseList.map(item => (
                  // 调用封装的单个房源展示组件
                  <HouseItem key={item.houseCode} item={item}></HouseItem>
                ))
              }
            </div>
          </div>
    }
            </div>
        );
    }
}
 const mapStateToprops=(state)=>({
     cityName:state.address.city
 })
export default connect(mapStateToprops)(MapFound);